<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @edit="showUpdate"
    >
      <template #filter-content>
        <el-input v-model="listQuery.params.realName" placeholder="搜索学员名称" style="width: 200px;" size="small" class="filter-item" />
        <dic-list-select v-model="listQuery.params.passed" dic-code="offline_pass_state" title="通过状态" />
      </template>

      <template #data-columns>

        <el-table-column
          label="考试名称"
          prop="title"
          show-overflow-tooltip/>

        <el-table-column
          label="账号"
          prop="userName"
          show-overflow-tooltip/>

        <el-table-column
          label="姓名"
          prop="realName"
          show-overflow-tooltip/>

        <el-table-column
          label="部门"
          prop="deptName"
          show-overflow-tooltip/>

        <el-table-column
          label="身份证号"
          prop="idCard"
          show-overflow-tooltip/>

        <el-table-column
          label="考试次数"
          align="center"
          prop="tryCount"
          show-overflow-tooltip
        />

        <el-table-column
          label="分数"
          prop="maxScore"
          align="center"
        />

        <el-table-column
          label="是否通过"
          prop="passStr"
          align="center"
        />

      </template>

    </data-table>

    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      title="成绩管理"
      width="600px"
    >

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="120px">


        <el-form-item label="考试次数" prop="tryCount">
          <el-input-number :min="0" v-model="postForm.tryCount" :precision="0" size="small" />
        </el-form-item>

        <el-form-item label="分数" prop="maxScore">
          <el-input-number :min="0" v-model="postForm.maxScore" :precision="1" size="small" />
        </el-form-item>

        <el-form-item label="是否通过" prop="passed">
          <el-radio v-model="postForm.passed" :label="false">未通过</el-radio>
          <el-radio v-model="postForm.passed" :label="true">已通过</el-radio>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>


  </div>

</template>

<script>
import permission from '@/directive/permission/index.js'
import ShareExamDialog from '@/views/admin/exam/exam/components/ShareExamDialog'
import { saveData } from '@/api/exam/record'
import DicListSelect from '@/components/DicListSelect/index.vue'

export default {
  components: { DicListSelect, ShareExamDialog },
  directives: { permission },
  data() {
    return {

      dialogVisible: false,
      postForm: {

      },

      rules: {

      },

      importDialog: false,
      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: 'none'
        }
      },

      options: {
        add: {
          enable: false
        },
        edit: {
          enable: true,
          permission: 'exam:offline:record:update'
        },
        delete: {
          enable: true,
          permission: 'exam:offline:record:delete',
          url: '/api/exam/record/delete'
        },
        // 可批量操作
        multi: true,
        // 列表请求URL
        listUrl: '/api/exam/record/paging'
      }
    }
  },

  created() {
    this.listQuery.params.examId = this.$route.query.examId
  },

  methods: {


    showUpdate(id, data) {
      this.postForm = data
      this.dialogVisible = true
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        saveData(this.postForm).then(() => {
          this.$notify({
            title: '成功',
            message: '成绩修改成功！',
            type: 'success',
            duration: 2000
          })

          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        })
      })
    },


    importSuccess() {
      this.importDialog = false
      this.$refs.pagingTable.getList()
    }
  }
}
</script>
